<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            margin: 50px;
        }
        #list li{
            float: left;
            margin-right: 10px;
        }
        #desc{
            font-size: 16px;
        }
        a{
            display: block;
        }
    </style>
</head>
<body>
    <div id = "box">
        <p id = "desc">蒲公英</p>
        <img src="../img/1.jpg" alt="" width="540" id="big-img">
        <ul id = "list">
            <li><a href="../img/1.jpg" title="蒲公英"> <img src="../img/1.jpg" alt="" width="100"></a></li>
            <li><a href="../img/2.jpg" title="热气球"> <img src="../img/2.jpg" alt="" width="100"></a></li>
            <li><a href="../img/3.jpg" title="别致小屋"> <img src="../img/3.jpg" alt="" width="100"></a></li>
            <li><a href="../img/4.jpg" title="高山流水"> <img src="../img/4.jpg" alt="" width="100"></a></li>
            <li><a href="../img/5.jpg" title="高速公路"> <img src="../img/5.jpg" alt="" width="100"></a></li>
        </ul>
    </div>

    <script>
        window.onload =function(){
            let desc = document.getElementById('desc');
            let big_img =document.getElementById('big-img');
            let list = document.getElementById('list');
            let as = list.getElementsByTagName('a');
            // console.log(as)

            for(let i=0;i<as.length;i++){
                let a = as[i];
                // console.log(a);
                //绑定点击事件
                a.onclick = function(){
                    // console.log(this);
                    desc.innerHTML = this.title;//innerHTML修改标签的值
                    big_img.src = this.href;
                    //直接结束执行
                    return false;
                }
            }
        }
    </script>
</body>
</html>